<script setup>
import { ref } from "@vue/reactivity"
import m from '@/scripts/m'
import { watch } from "@vue/runtime-core"
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import $const from '@/scripts/const'
import { message } from 'ant-design-vue'

let api = (cmd, params)=>{
    return m.background(cmd, params).catch(err=>{
        let {code, data, msg} = err || {}
        if(code !== 200){
            message.error(msg)
        }
        throw err
    })
}

let langs = ref($const.langs)

let langsSelected = ref([])

m.background('getLangs').then(val=>{
    langsSelected.value = val?.length > 0?val:langs.value.slice(0, 3).map(i=>i.id)
})
watch(langsSelected, val=>{
    m.background('setLangs', val)
})


let isLogin = ref(false)
function refreshLoginState(){
    return m.background('isLogin').then(val=>{
        isLogin.value = val
    })
}
refreshLoginState()

let email = ref('')
let password = ref('')
let passwordConfirm = ref('')

let mode = ref('login')
watch(mode, ()=>{
    email.value = ''
    password.value = ''
    passwordConfirm.value = ''
}, {
    immediate: true
})

function handleLogin(){
    api('login', {
        email: email.value,
        password: password.value,
    }).then(()=>{
        return refreshLoginState()
    })
}
function handleLogout(){
    api('logout').then(()=>{
        isLogin.value = false
    })
}
function handleRegister(){
    api('register', {
        password: password.value,
        email: email.value,
    }).then(()=>{
        mode.value = 'login'
    })
}
</script>

<template>
<div class="container v-m">
    <!-- <transition name="fade" mode="out-in"> -->
        <div v-if="!isLogin">
            <transition name="fade" mode="out-in">
                <div class="v-s" v-if="mode==='login'">
                    <input type="email" placeholder="邮箱" class="input" v-model="email">
                    <input type="password" placeholder="密码" class="input" v-model="password">
                    <div class="clickable" @click="mode='register'">注册</div>
                    <div style="text-align: right">
                        <button @click="handleLogin" class="button" type="button">登陆</button>
                    </div>
                </div>
                <div class="v-s" v-else>
                    <input type="email" placeholder="邮箱" class="input" v-model="email">
                    <input type="password" placeholder="密码" class="input" v-model="password">
                    <input type="password" placeholder="确认密码" class="input" v-model="passwordConfirm">
                    <div @click="mode='login'">登陆</div>
                    <div style="text-align: right">
                        <button @click="handleRegister" class="button" type="button">注册</button>
                    </div>
                </div>
            </transition>
        </div>
        <div v-else class="v-m">
            <div class="v-s">
                <div class="h h-xs item-label">
                    <div style="flex-shrink: 0">翻译池</div>
                    <a-tooltip>
                        <template #title>翻译后按 <strong>Tab</strong> 键对翻译语言进行切换</template>
                        <QuestionCircleOutlined /></a-tooltip>
                </div>
                <a-select
                    style="width: 100%"
                    v-model:value="langsSelected"
                    mode="multiple"
                    >
                    <a-select-option :disabled="langsSelected.length >= 3 && !langsSelected.includes(l.id)" v-for="l in langs" :key="l.id" :value="l.id">{{l.text}}</a-select-option>
                </a-select>
            </div>
            <div>
                <button type="button" class="button" @click="handleLogout">退出登陆</button>
            </div>
        </div>
    <!-- </transition> -->
</div>
</template>

<style lang="scss">
@import '@/styles/block.scss';
*{
    margin: 0;
    box-sizing: border-box;
}
body{
    font-size: 12px !important;
    min-width: 350px;
    min-height: 400px;
}
#app{
    width: 100%;
    height: 100%;
}
.container{
    padding: 16px;
    width: 100%;
    height: 100%;
    background: whitesmoke;
    .item-label{
        width: 40px;
    }

    .input{
        width: 100%;
        border: 1px solid lightgray;
        padding: 4px 8px;
        border-radius: 5px;

        &:focus{
            outline: none;
            box-shadow: rgba(0, 0, 0, .1) 0 0 12px;
        }
    }
    .button{
        padding: 4px 12px;
        background: white;
        border: 1px solid lightgray;
        border-radius: 5px;
        cursor: pointer;

        &:focus{
            outline: none;
        }
    }
}

.clickable{
    cursor: pointer;
    transition: opacity .3s;
    &:hover{
        opacity: .8;
    }
}
// transitions

// fade
.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// fade-fast
.fade-fast-enter-active,
.fade-fast-leave-active {
  transition: opacity .1s;
}

.fade-fast-enter-from,
.fade-fast-leave-to {
  opacity: 0;
}


// fade-transition-right
.fade-tr-enter-active,
.fade-tr-leave-active {
  transition: opacity .3s, transform .3s;
}

.fade-tr-enter-from,
.fade-tr-leave-to {
  opacity: 0;
  transform: translate(32px, 0);
}
</style>
